<template>
  <div>
      <!-- <keep-alive> -->
      <router-view @closePage="closePage" :key="key"></router-view>
      <!-- </keep-alive> -->
  </div>
</template>  

<script lang="ts">
import { defineComponent } from 'vue'


export default defineComponent({
  name: 'SubDefaultContainer',
  components: {
  },
  data(){
    return {
    }
  },

  methods:{

    closePage(){
      this.$emit("closePage");
    }
  },

  computed:{

    key(){
      if(this.$route.name !== undefined){

        if(this.$route.name){
          return this.$route.name as String +  new Date().toDateString();
        }

        return new Date().toDateString();
      }
      else {
        return new Date().toDateString();
      }
    }

  },

  mounted(){
  },

  setup(){
  }


})



</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.main-container{
  width: 100%;
  height: 100%;  
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;

  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  

  .main-container__header{
    width: 100%;
    height: 60px;
    background-color:white;

  }
}

.main-container__main__menu{
  width: 300px;
  height: 100%;
  display: flex;
  flex-direction: row;
  overflow: auto;
}

.main-container__main{
  width: 100%;
  height: 100%;  
  display: flex;
  flex-direction: row;
}

</style>
